<template>
		<view class="qus-card" :style="{top:top+'px'}">
		<view class="title" @tap="close" :style="{background:color}">
			<view class="title-inner">
				<u-icon color="#333" name="close"></u-icon>
				<view>关闭</view>
			</view>
		</view>
		<view class="card-content">
			<view :class="['item',item.finish ? (mode == 1 ? 'right' : (item.isRight ? 'right' : 'wrong')) : '']" v-for="(item, index) in questions" :key="index" @click="swiperTo(index)">
				{{ index + 1 }}
			</view>
		</view>
	</view>
</template>

<script>

export default {
	name: 'myPopupCard',
	props: {
		// 1:普通模式的答题卡,会判断对错 0:考试模式,只判断是否完成
		mode: {
			type: String,
			default: ''
		},
		questions: {
			type: Array
		},
		top:{
			type:Number,
			default:0
		},
		color:{
			type:String,
			default:''
		}
	},
	computed: {
	},
	methods: {
		close() {
			this.$emit('close');
		},
		swiperTo(index) {
			this.$emit('swiperTo', index);
			this.close();
		},
		itemClass(item) {
			let str = '';
			if (this.mode == 'ks') {
				item.finish ? str = 'right' : str;
			} else {
				item.finish ? (item.isRight ? str="right" : str='wrong') :str;
			}
			return arr;
		}
	}
};
</script>

<style lang="less" scoped>
.qus-card {
	position: fixed;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	z-index: 9999999;
	background-color: transparent;
	.title {
		//background-color: @themeColor;
		background-color: #333333;
		color: #ccc;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 28rpx;
		text-align: center;
		.my-icons {
			text-align: right;
		}
		.title-inner {
					display: flex; /* 新增 */
					//align-items: center; /* 新增 */
					//justify-content: center; /* 新增 */
					height: 100%; /* 确保整个高度都可用于对齐 */
					color: #333333;
					padding-left: 24rpx;
				}
	}
	.card-content {
		// position:absolute;
		// width:100%;
		// top:80rpx;
		// left:0;
		background-color: #fff;
		height: calc(100% - 80rpx);
		overflow-y: scroll;
		display: flex;
		flex-flow: row wrap;
		text-align: center;
		justify-content: flex-start;
		align-content: flex-start;
		color: #666;
		.item {
			font-size: 32rpx;
			width: 80rpx;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 50%;
			background: #e6effb;
			margin: 15rpx 35rpx;
			&.right {
				color: #fff;
				background-color: #4cd964;
			}
			&.wrong {
				color: #fff;
				background-color: #dd524d;
			}
		}
	}
}
</style>
